import { Component } from 'react'
import { View, Image, Text } from '@tarojs/components'
import { AtIcon } from 'taro-ui'
import './index.scss'

export default class Mine extends Component {
  render() {
    return (
      <View className='mine-container retro-font'>
        {/* 用户信息 */}
        <View className='user-header'>
          <Image 
            className='user-avatar'
            src='https://via.placeholder.com/120x120/e5e5e5/999?text=Avatar'
          />
          <View className='user-info'>
            <Text className='user-name'>Hi, 艺术工坊</Text>
            <Text className='user-id'>ID 20241026</Text>
          </View>
          {/* <View className='user-actions'>
            <AtIcon value='edit' size='20' color='#999' />
            <AtIcon value='menu' size='20' color='#999' />
          </View> */}
        </View>

        {/* 功能按钮 */}
        <View className='action-buttons'>
          <View className='action-button'>
            <AtIcon value='star' size='28' color='#111' />
            <Text className='button-text'>我的收藏</Text>
          </View>
          <View className='divider' />
          <View className='action-button'>
            <AtIcon value='phone' size='28' color='#111' />
            <Text className='button-text'>联系我们</Text>
          </View>
          <View className='divider' />
          <View className='action-button'>
            <AtIcon value='help' size='28' color='#111' />
            <Text className='button-text'>在线客服</Text>
          </View>
        </View>

        {/* 列表项 */}
        <View className='list-section'>
          <View className='list-item'>
            {/* <AtIcon value='search' size='16' color='#333' /> */}
            <Text className='item-text'>发现搜索</Text>
            <AtIcon value='chevron-right' size='16' color='#999' />
          </View>
          <View className='list-item'>
            {/* <AtIcon value='qr-code' size='16' color='#333' /> */}
            <Text className='item-text'>专属小程序码</Text>
            <AtIcon value='chevron-right' size='16' color='#999' />
          </View>
        </View>

        {/* <View className='list-section'>
          <View className='list-item'>
            <AtIcon value='phone' size='20' color='#333' />
            <Text className='item-text'>联系我们</Text>
            <AtIcon value='chevron-right' size='16' color='#999' />
          </View>
          <View className='list-item'>
            <AtIcon value='sound' size='20' color='#333' />
            <Text className='item-text'>在线客服</Text>
            <AtIcon value='chevron-right' size='16' color='#999' />
          </View>
        </View> */}

        {/* Footer */}
        <View className='footer'>
          {/* <View className='logo'>品色</View> */}
          {/* <Text className='footer-text'>由品色互动提供技术支持</Text> */}
          <Text className='footer-version'>V 3.1.97</Text>
        </View>
      </View>
    )
  }
}
